<template>
  <div class="buyerManagement app-container">
      <div class="__page">

        <div class="header_search">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="买受人名称:">
              <el-input prefix-icon="el-icon-search" v-model="formInline.nameBuyer" placeholder="买受人名称" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="formInline.startEndTime"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                size="mini"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="searching" size="mini">检索</el-button>
              <el-button size="mini">重置</el-button>
              <el-button type="primary" @click="searching" size="mini">发起限制</el-button>
          </div>
        </div>


        <div class="table_box">
          <el-table
            :data="tableData"
            border
            stripe
            height="670"
            style="width: 100%"
            :header-cell-style="{background:'#f5f7fa'}">
            <el-table-column label="限制来源" prop="name" align="center" width="200">
            </el-table-column>
            <el-table-column label="上报单位" prop="name" align="center" width="200">
            </el-table-column>
            <el-table-column label="标的名称" prop="name" align="center">
            </el-table-column>
            <el-table-column label="买受人名称" prop="name" align="center">
            </el-table-column>
            <el-table-column label="创建时间" prop="name" align="center">
            </el-table-column>
            <el-table-column label="限制原因" prop="name" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[7, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

    </div> 
  </div>
</template>
  
<script>

  export default {
    name: 'buyerManagement',
    data(){
      return{
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        formInline:{
          nameBuyer:'',
          startEndTime:'',
        },
        page:1,
        limit:10,
        total:0,
        tableData:[
          {name:'222222'}
        ],
      }
    },
    created(){
      this.list();
    },
    methods:{
      list(){

      },
      // 分页
      handleSizeChange(val) {
        this.limit = val
        this.list()
      },
      // 分页
      handleCurrentChange(val) {
        this.page = val
        this.list()
      },
    },
  }
</script>
  
<style lang="scss" scoped>
  .buyerManagement {
    .header_search{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
  